<template>
  <div class="productCard">
    <div class="card clear">
      <div class="float leftimg">
        <van-image
          width="100"
          height="100"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
      <div class="float righttitle">
        <div class="rightcon">{{ productmessage.title }}</div>
        <div class="rightcon">
          <van-row class="littlefont margintop">
            <van-col span="3" class="newprice">
              ￥{{ productmessage.newprice }}
            </van-col>
            <van-col span="5" class="oldprice">
              ￥{{ productmessage.oldprice }}
            </van-col>
            <van-col span="7" class="pronum"> 剩余0件 </van-col>
            <van-col span="9">
              <router-link to="/hadLottery">
                <van-button type="primary" class="addbutton">已售罄</van-button>
              </router-link>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "hadseckill",
  data() {
    return {
      productmessage: {
        title: "【仅限深圳同城地区】新鲜水果上市 大荔冬枣  5斤/箱 ",
        newprice: 1,
        oldprice: 99,
        productstatus: false,
      },
    };
  },
  components: {},
};
</script>

<style scoped>
.clear::before,
.clear::after {
  content: "";
  display: table;
}
.clear::after {
  clear: both;
}
.float {
  float: left;
}
.leftimg {
  margin: 10px;
}
.righttitle {
  width: 240px;
  text-align: left;
}
.rightcon {
  font-size: 15px;
  margin-top: 5px;
}
.addbutton {
  height: 30px;
  background-color: rgb(253, 70, 70);
  border-radius: 15px;
  padding: 8px 20px 8px 20px;
  outline: none;
  border: none;
}
.newprice {
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  color: rgb(253, 70, 70);
}
.oldprice {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  text-decoration: line-through;
}
.pronum {
  height: 30px;
  line-height: 30px;
}
.margintop {
  margin-top: 36px;
}
</style>
